<template>
	<div>
		<el-table :data="list" border style="width: 100%">
			<el-table-column label="label" align="center" prop="label">
				<template #default="scope">
					<el-input v-model="scope.row.label" @blur="updateValue(scope.row)"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="value" align="center" prop="value">
				<template #default="scope">
					<el-input v-model="scope.row.value" @blur="updateValue(scope.row)"></el-input>
				</template>
			</el-table-column>
			<el-table-column min-width="35" align="center" fixed="right" label="操作" width="55">
				<template #default="scope">
					<span class="iconfont icon-shanchu"></span>
				</template>
			</el-table-column>
		</el-table>
		<el-button type="text" @click="add">
			<span class="iconfont icon-tianjia1"></span>添加
		</el-button>
	</div>
</template>

<script>
	import { deepCopy } from '@form-create/utils/lib/deepextend'
	import { ref, onMounted } from 'vue'

	export default {
		name: 'TableOptions',
		props: {
			modelValue: [Object, Array, String]
		},
		setup (props, { emit }) {
			const list = ref([])

			const updateValue = (row) => {
				emit('update:modelValue', list.value)
			}
			const add = () => {
				list.value.push({ label: '', value: '' })
			}
			const del = (idx) => {
				list.value.splice(idx, 1)
				updateValue()
			}
			onMounted(() => {
				list.value = deepCopy(props.modelValue || [])
			})
			return {
				add, del, updateValue, list
			}
		}
	}
</script>

<style scoped>
	.icon-shanchu {
		font-size: 18px;
	}

	.icon-tianjia1 {
		font-size: 18px;
		color: #409EFF;
	}
</style>
